<template>
  <div class="page">
    <header class="header"></header>
    <div class="login" v-if="showLogin===1">
    <div class="login-view" >
    <div class="login-third">
      <div class="third" @click="thirdLogin('google')">
        <svg-icon iconClass="google" class="icon"/>
        <div class="log-google">
          {{ $t('login.gg') }}
        </div>
      </div>
      <!-- <div class="third fb" @click="thirdLogin('facebook')">
        <svg-icon iconClass="fb" class="icon"/>
        <div class="log-facebook">
          {{ $t('login.fb') }}
        </div>
      </div>
      <div class="third fb" @click="thirdLogin('tiwitter')">
        <svg-icon iconClass="tiwitter" class="icon"/>
        <div class="log-facebook">
          {{ $t('login.tt') }}
        </div>
      </div> -->
    </div>
    <div class="split-line">
      <span class="line"></span>
      <span class="select">{{ $t('login.or') }}</span>
      <span class="line"></span>
    </div>
    <div class="login-body">
      <div class="email">
        <el-input :placeholder=" $t('form.emailPlaceholder')" v-model="form.email" :value="form.email" @blur="emailRule">
        <template slot="prepend" >{{ $t('form.email') }}</template>
        </el-input>
      </div>
      <div class="email pwd">
        <el-input :placeholder="$t('form.pwdPlaceholder')" v-model="form.pwd" :type="passwordVisible? 'text': 'password'" @blur="pwdRule">
        <template slot="prepend" >
          <div>{{ $t('form.pwd') }}</div>
          <svg-icon :iconClass="passwordVisible?'eye':'eye-close'" class="eye" @click.native="handlePasswordVisible"/>
        </template>
        </el-input>
      </div>
  </div>
  <div class="login-help">
    <div class="account">
      {{ $t('login.account') }}
      <span class="register" @click="swith(2)">{{ $t('login.register') }}</span>
    </div>
    <div class="forgot"  @click="swith(3)">
      {{ $t('login.forgot') }}
    </div>
  </div>
  <div class="log-button">
    <el-button type="primary" class="log-in" @click="onEmailLogin" :loading="loading">{{ $t('login.log') }}</el-button>
  </div>
    </div>

    </div>
    <EmailRegister v-else-if="showLogin===2" @showLogin="backLogin" @codeToLogin="backLogin"></EmailRegister>
    <EmailForgot v-else @showLogin="backLogin" @codeToLogin="backLogin"></EmailForgot>
  </div>

</template>
<script>
import { login } from '@/api/login'
import { mapGetters } from 'vuex'
import { getPwdMD5Str } from '@/utils'
import EmailRegister from './email-register.vue'
import EmailForgot from './email-forgot.vue'
import mixins from './mixins'
export default {
  name: 'EmailLogin',
  mixins: [mixins],
  props: {
    isPage: Boolean
  },
  components: { EmailRegister, EmailForgot },
  data () {
    return {
      passwordVisible: false,
      loading: false,
      showCode: true,
      showLogin: 1,
      form: {
        email: localStorage.getItem('emailaddress') || '',
        pwd: ''
      },
      emailRight: localStorage.getItem('emailaddress'),
      pwdRight: false
    }
  },
  computed: {
    ...mapGetters(['appInfo']),
    rules () {
      return this.pwdRight && this.emailRight
    }
  },
  mounted () {
    this.$xz('xz_set_main_window_size', 550 + 24, 510 + 24)
  },
  methods: {
    swith (val) {
      this.$PsMessage.closeAll()
      this.showLogin = val
    },
    backLogin () {
      this.showLogin = 1
      this.form.email = localStorage.getItem('emailaddress')
    },
    handlePasswordVisible () {
      this.passwordVisible = !this.passwordVisible
    },
    emailRule () {
      this.emailRight = this.emailRules(this.form.email)
    },
    pwdRule () {
      this.pwdRight = this.pwdRules(this.form.pwd)
    },
    thirdLogin (t) {
      this.$xzAsy('xz_GetGoogleCode')
    },
    onEmailLogin () {
      if (this.rules) {
        const params = {
          type: 'email',
          pwd: getPwdMD5Str(this.form.pwd),
          email: this.form.email,
          channel: this.appInfo.channel, // 渠道信息
          uuid: this.appInfo.uuid, // 设备信息
          version: this.appInfo.version,
          device_name: this.appInfo.device_name // 设备名称
        }
        this.loading = true
        login(params).then(res => {
          const data = res.data || {}
          data.isAutoLogin = true
          data.isLogin = true
          data.loginType = 'emailLogin'
          localStorage.setItem('emailaddress', this.form.email)
          this.$router.push('/usercenter')
          this.onLoginFinish(data)
        }).catch(err => {
          if (err && err.code === 100429) {
            const data = err.data
            data.isAutoLogin = true
            data.loginType = 'wxLogin'
            this.needDelDevice(data)
          }
        }).finally(() => {
          this.loading = false
        })
      } else if (!this.emailRight) {
        this.emailRule()
      } else if (!this.pwdRight) {
        this.pwdRule()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.page{
  width: 100%;
  height: 100%;
}
.header{
  position: fixed;
  width: 100%;
  top:0;
  height: 40px;
  background-color: #2D2E35;
  z-index: 99;
}
.login{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.login-view{
  // padding: 79px 45px 60px;
  // width: 100%;
  // height: 100%;
  .login-third{
    width: 100%;
    .fb{
      margin-top: 12px;
    }
    .third{
      width: 100%;
      height: 40px;
      font-size: 12px;
      font-weight: 400;
      background: rgba(255,255,255,0.05);
      border-radius: 6px;
      border: 1px solid rgba(255,255,255,0.1);
      display: flex;
      align-items: center;
      cursor: pointer;
      &:hover{
        border-color:var(--color-primary-1);
        background: rgba(0,187,215,0.05);
      }
    .icon{
      margin: 0 10px 0 16px;
    }
    }
  }
  .split-line{
    display: flex;
    align-items: center;
    margin: 26px 0 26px 0;
    width: 100%;
    height: 16px;
    .line{
      display: inline-block;
      width: 200px;
      height: 1px;
      background: rgba(255, 255, 255, .1);
    }
    .select{
      display: inline-block;
      text-align: center;
      width: 60px;
      font-size: 12px;
      color: rgba(255, 255, 255, .7);
    }
  }
  .login-body{
    display: flex;
    .pwd{
      margin-left: 11px;
    }
    .email{
      width: 225px;
      height: 60px;
      background: rgba(0,187,215,0.05);
      border-radius: 6px;
      border: 1px solid var(--color-primary-2);
      &:hover{
        border-color: var(--color-primary-1);
      }
      .el-input-group--prepend{
        display: flex;
        flex-wrap: wrap;
        /deep/ .el-input-group__prepend{
          display: flex;
          justify-content: space-between;
          padding: 6px 10px 0;
          width: 100%;
          background-color:transparent;
          font-size: 12px;
          font-weight: 400;
          color: #FFF;
          border: none;
          .eye{
            width: 16px;
            height: 16px;
            &:hover{
              color: var(--color-primary-1);
              cursor: pointer;
            }
          }
        }
        /deep/ .el-input__inner{
          padding: 0 10px;
          height: 38px;
          background:transparent;
          font-weight: bold;
          font-size:12px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          border: none;
          &::placeholder{
            color:rgba(255, 255, 255, .3);
            font-weight: 400;
          }
        }
      }
    }
  }
  .login-help{
    margin: 10px 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .account{
      font-size: 12px;
      font-weight: 400;
      color: rgba(255, 255, 255, .7);
      .register{
        color: #FFF;
        border-bottom: 1px solid #FFF;
        cursor: pointer;
        &:hover{
          color: var(--color-primary-1);
          border-bottom-color: var(--color-primary-1);
        }
      }
    }
    .forgot{
      font-size: 12px;
      font-weight: 400;
      color: #fff;
      border-bottom: 1px solid #fff;
      cursor: pointer;
      &:hover{
          color: var(--color-primary-1);
          border-bottom-color: var(--color-primary-1);
        }
    }
  }
  .log-button{
    text-align: center;
    .log-in{
      width: 240px;
      height: 40px;
      font-size: 14px;
      font-weight: bold;
      color: #FFF;
      border-radius: 5px;
      background-color:var(--color-primary) ;
      border: none;
      &:hover{
        background-color: var(--color-primary-0);
      }
    }
  }
}
</style>
